<template>
    <div class="ivu-pt-16">
        <Card dis-hover :bordered="false">
            <Table highlight-row :columns="columns" :loading="loading" :data="datawidthPage">
                <template slot="status" slot-scope="{row}">
                    <Badge v-if="row.status === true" status="success" text="正常"></Badge>
                    <Badge v-else status="error" text="停用"></Badge>
                </template>
                <template slot="action" slot-scope="{row,index}">
                    <a @click="handleEdit(index)">{{row.action}}</a>
                </template>
            </Table>
        </Card>
        <div class="ivu-mt ivu-text-center" slot="footer">
            <Page :total="limiData.length" :current.sync="current" show-elevator show-sizer show-total></Page>
        </div>
        <Modal title="编辑任务" v-model="editModal" :mask-closable="false" @on-ok="handleSubmit()">
            <Form :model="formData">
                <FormItem label="类型：">
                    <RadioGroup v-model="formData.type">
                        <Radio label="循环">循环</Radio>
                        <Radio label="定时">定时</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem v-if="formData.type === '循环'" label="频率：">
                    <Input placeholder="请输入" v-model="formData.frequency" v-width="80" />
                    <Select v-width="70" class="ivu-ml-8">
                        <Option value="时">时</Option>
                        <Option value="分">分</Option>
                    </Select>
                </FormItem>
                <FormItem v-else label="每天：">
                    <TimePicker format="HH点mm分ss秒" placeholder="请选择每天执行时间" />
                </FormItem>
                <FormItem label="状态：" v-model="formData.status">
                    <Switch />
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
export default {
    data() {
        return {
            loading: false,
            current: 1,
            size: 10,
            editModal: false,
            formData: {
                frequency: '',
                type: '循环',
                status: '',
                time: ''
            },
            columns: [
                {
                    title: '任务名称',
                    key: 'name',
                    minWidth: 150
                },
                {
                    title: '频率（H:M）',
                    key: 'frequency',
                    width: 150
                },
                {
                    title: '状态',
                    slot: 'status'
                },
                {
                    title: '上次开始时间',
                    key: 'lastTime'
                },
                {
                    title: '上次结束时间',
                    key: 'lastEndTime'
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 80
                }
            ],
            list: [],
            creating: true,
            updadeIndex: -1
        }
    },
    computed: {
        limiData() {
            let data = [...this.list]
            return data
        },
        datawidthPage() {
            const data = this.limiData
            const start = this.current * this.size - this.size
            const end = start + this.size
            return [...data].slice(start, end)
        }
    },
    methods: {
        mockData() {
            const item = {}
            item.name = '状态自动变更状态'
            item.frequency = '24:00'
            item.status = this.status()
            item.lastTime = '2020-06-15 00:03:26'
            item.lastEndTime = '2020-06-15 00:09:26'
            item.action = '编辑'
            return item
        },
        status() {
            let value = Math.floor(Math.random(0) * 2)
            if (value === 0) return true
            else return false
        },
        getData() {
            this.current = 1
            this.loading = true
            setTimeout(() => {
                let data = []
                for (let i = 0; i < 20; i++) {
                    data.push(this.mockData())
                }
                this.list = data
                this.loading = false
            }, 1000)
        },
        handleSubmit() {
            // this.list[index].status = this.formData.status
            // this.list[index].frequency = this.formData.frequency
            this.$Message.success('编辑成功')
        },
        handleEdit(index) {
            this.editModal = true
            const item = this.list[index]
            this.formData.status = item.status
            this.formData.frequency = item.frequency
        }
    },
    mounted() {
        this.getData()
    }
}
</script>